<template>
  <div class="home">
    <h1>父组件</h1>
    <p>{{ count }}</p>
    <SonOne />
    <SonTwo />
    <p>
      接受传递的数据:{{ getSMsg }}
    </p>
  </div>
</template>

<!-- setup新写法 -->
<script setup>
import SonOne from '@/components/SonOne.vue'
import SonTwo from '@/components/SonTwo.vue'
import { ref, provide } from 'vue'


let count = ref(10);
provide('count', count)


let getSMsg = ref(null);
// 修改的方法
let changeCount = (data) => {
  console.log(data);
  getSMsg.value = data

}

provide('changeCount', changeCount)

// 1.必须是父级组件提供数据,提供方法(provide对象-父级组件)
// 2.子级组件进行inject使用数据,通过提供的方法,可以传递给父组件数据
// 3.如果修改inject数据,需要加上.value


</script>
